<template>
  <div class="cates">
    <Search />
    <div class="cates_container">
      <!-- 左侧 -->
      <div class="left_menu">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item :title="item" v-for="(item,index) in leftMenuList" :key="index" />
        </van-sidebar>
      </div>
      <!-- 右侧 -->
      <div class="right_menu" scroll-y>
        <div class="goods_group" v-for="(item,index) in rightContent" :key="index">
          <!-- 标题 -->
          <div class="goods_title">
            <span class="delimiter">/</span>
            <span class="title">{{item.cat_name}}</span>
            <span class="delimiter">/</span>
          </div>
          <!-- 九宫格 -->
          <van-grid :column-num="3" :border="false">
            <van-grid-item
              v-for="(item2,index2) in item.children"
              :key="index2"
              :to="'/goodslist/'+item2.cat_id"
            >
              <img :src="item2.cat_icon" />
              <div class="goods_name">{{item2.cat_name}}</div>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Search from '../components/Search'
export default {
  components: { Search },
  data() {
    return {
      activeKey: 0,
      leftMenuList: [],
      rightContent: [],
      Cates: [],
      currentIndex: 0,
      scrollTop: 0
    }
  },
  methods: {
    // 左侧点击事件
    handleItemTap(index) {
      console.log('左侧index', index)
      // 精髓========
      this.rightContent = this.Cates[index].children
      this.currentIndex = index
      this.currentIndex = index
      this.scrollTop = 0
    },
    async getCates() {
      const res = await this.$http.get('/categories')
      console.log('category 请求', res)
      this.Cates = res.data.message
      // console.log('this.Cates', this.Cates)
      // 写入缓存数据
      localStorage.setItem(
        'cates',
        JSON.stringify({
          time: Date.now(),
          data: JSON.stringify(this.Cates)
        })
      )
      this.leftMenuList = this.Cates.map(v => v.cat_name)
      this.rightContent = this.Cates[0].children
    }
  },
  created() {
    const cates = JSON.parse(localStorage.getItem('cates'))
    if (!cates) {
      console.log('已请求新的分类数据')
      this.getCates()
    } else {
      if (Date.now() - cates.time > 1000 * 10) {
        console.log('已重新请求新的分类数据')
        this.getCates()
      } else {
        console.log('分类数据还很新')
        this.Cates = JSON.parse(cates.data)
        console.log(typeof this.Cates)
        this.leftMenuList = this.Cates.map(v => v.cat_name)
        this.rightContent = this.Cates[0].children
      }
    }
  }
}
</script>

<style lang='less' scoped>
.cates {
  width: 100%;
  height: 100%;
  // overflow: hidden;

  // 容器
  .cates_container {
    width: 100%;
    height: ~'calc(100vh - 141px)';
    display: flex;
    overflow: hidden;

    // 左
    .left_menu {
      flex: 2;
      // height: calc(~'100hv - 141px');
      overflow: auto;
      .van-sidebar-item {
        width: 100%;
        font-size: 15px;
        height: 40px;
        line-height: 40px;
        padding: 0;
        background-color: #fff;
        text-align: center;
      }
    }

    // 右
    .right_menu {
      flex: 5;
      // height: calc(~'100hv - 141px');
      overflow: auto;
      // background-color: plum;

      .goods_group {
        // 标题
        .goods_title {
          height: 80rpx;
          margin-top: 10px;
          display: flex;
          justify-content: center;
          align-items: center;

          .delimiter {
            color: #ccc;
            padding: 0 10rpx;
          }
        }
        .van-grid-item {
          width: 33.3%;
          img {
            width: 50%;
          }
        }
      }
    }
  }
}
</style>
